<!--
* description: 模板-单表格不含序号
* author: xlc
* createdDate: 2020-11-30
-->
<template>
  <section
    id="UE-e3s"
    class="filter-params-e3s"
  >
    <!-- 查询结果 -->
    <el-table
      v-if="tableCols.length > 0"
      :ref="tableRef"
      :key="oneTableKey"
      v-loading="listLoading"
      class="crmonepage-hello"
      :data="list"
      :element-loading-text="$store.state.app.loadingText"
      border
      stripe
      :height="tableHeight"
      highlight-current-row
      :span-method="dataArraySpanMethod"
      :show-summary="isShowSummary"
      :summary-method="summaryMethod"
      :cell-style="cellStyle"
      @header-dragend="columnWidthChange"
      @row-click="handleTableRowChange"
      @row-dblclick="handleTableRowDbClick"
      @select="checkSelect"
      @select-all="checkSelectAll"
      @selection-change="checkSelectChange"
      @sort-change="onSortChange"
    >
      <el-table-column
        v-if="isShowSelect"
        align="center"
        type="selection"
        :fixed="!isRowDrop && isFixChoose"
        width="55"
        filed="chose"
        current-row-key="choose"
        :selectable="getSelectable"
      />
      <!-- 选择 -->
      <el-table-column
        v-for="(col, index) in tableCols.filter(o => o.hidden !== true)"
        :key="`col_${index}`"
        :fixed="(dropTableCols[index].fixed || false) && !isRowDrop"
        :label="col.label"
        :prop="dropTableCols[index].prop"
        :width="dropTableCols[index].width || null"
        :hidden="dropTableCols[index].hidden"
        :align="dropTableCols[index].align||'center'"
        :header-align="dropTableCols[index].headerAlign||'center'"
        :show-overflow-tooltip="true"
        :sortable="dropTableCols[index].sortable || sortable"
      >
        <template slot-scope="scope">
          <slot
            v-if="dropTableCols[index].isSlot === true"
            :name="dropTableCols[index].prop"
            :col="dropTableCols[index]"
            :row="scope.row"
            :scope="scope"
          />
          <span v-if="!dropTableCols[index].isSlot && dropTableCols[index].isComponent === true && dropTableCols[index].comps" :key="compInColsKey">
            <component
              :is="comp.component"
              v-for="(comp, compIndex) in dropTableCols[index].comps"
              :ref="comp.isRequire ? 'tableCom'+comp.isRequire+ comp.compKey : comp.compKey"
              :key="comp.compKey"
              :code-field="comp.codeField"
              :text-field="comp.textField"
              :popups-key="comp.compKey"
              :is-show="scope.row[comp.compareField]===comp.compareValue"
              :is-show-none="getIsShowNone(scope.row,comp.compareNone,comp.compareNoneVal)"
              :code="scope.row[comp.codeField]"
              :text="scope.row[comp.textField]"
              :validrule="comp.validrule"
              :com-type="scope.$index+''"
              :col-index="index+''"
              :comp-index="compIndex+''"
              :is-mul="comp.isMul"
              :span="dropTableCols[index].span || 24"
              :is-show-label="comp.isShowLabel"
              :is-show-comp="comp.isShowComp"
              :is-input="comp.isInput"
              :label-name="dropTableCols[index].link ? dropTableCols[index].prop : comp.labelName"
              :lookuptype="comp.lookuptype"
              :disabled="comp.disabled"
              :is-require="comp.isRequire"
              :format="comp.format"
              :step="comp.step"
              :date-type="comp.dateType"
              :date-options-type="comp.dateOptionsType"
              :cont-way="[scope.row,comp.contWay]"
              :clearable="comp.clearable"
              :filterable="comp.filterable"
              :cur-table-row="comp.rowFileds?scope.row:null"
              :row-fileds="comp.rowFileds"
              :parent-fileds="comp.parentFileds || ''"
              :must-fields="comp.mustFields || ''"
              :return-code-field="comp.returnCodeField"
              :return-text-field="comp.returnTextField"
              :other-field="comp.otherField"
              :is-col-comp="true"
              :is-async="comp.isAsync"
              :is-use-default="comp.isUseDefault"
              :is-host="comp.isHost"
              :o-fields="comp.oFields"
              :un-list-qury-fields="comp.unListQuryFields"
              :data-to-object="comp.dataToObject"
              @changeCode="getRowComponentCode"
              @clickEvent="getRowClickEvent"
            />
          </span>
          <span v-else-if="!dropTableCols[index].isSlot && !dropTableCols[index].isComponent && dropTableCols[index].prop === 'isEnable'">{{ (scope.row[dropTableCols[index].prop] === '1') ? '是' : '否' }}</span>
          <span v-else-if="!dropTableCols[index].isSlot && dropTableCols[index].isFlag">{{ (scope.row[dropTableCols[index].prop] === '1') ? '是' : '否' }}</span>
          <span v-else-if="!dropTableCols[index].isSlot" :style="isTableColor?getIsTableDge(scope.row):''">{{ scope.row[dropTableCols[index].prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="isShowPagination && tableCols.length > 0"
      ref="oneTable.pageArea"
      background
      :page-sizes="pageSizeArray"
      :page-size="dynamicPageSize"
      :prev-text="$t('sys.content.prevPage')"
      :next-text="$t('sys.content.nextPage')"
      layout="prev, pager, next, jumper, sizes, ->, total"
      :total="pageTotal"
      :disabled="pageDisabled"
      :current-page.sync="listQuery.pageIndex"
      :pager-count="dynamicPagerCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <div
      v-show="isOver"
      id="scrollLeftEle"
      class="page-ScrollButton"
      :class="getBtnClass('left')"
      @click="leftScroll(3)"
    ><i class="el-icon-caret-left" /></div>
    <div
      v-show="isOver"
      id="scrollRightEle"
      class="page-ScrollButton"
      :class="getBtnClass('right')"
      @click="rightScroll(3)"
    ><i class="el-icon-caret-right" /></div>
    <!-- 底部按钮 -->
    <div
      v-if="isshowSearchTableButton && isPopups"
      ref="oneTable.buttonArea"
      class="filter-container"
    >
      <el-row
        v-if="isshowSearchTableButton"
        :gutter="24"
        class="butClass"
      >
        <el-col
          :span="24"
          class="table-col"
        >
          <mix-button
            v-if="tableButtons.filter(o => o.position === 'left').length !==0"
            name="searchBtns"
            :sv-fields="svFields"
            :dynamic-buttons="tableButtons.filter(o => o.position === 'left')"
            :dynamic-components="tableComponents"
            :is-show-more="true"
            :form-field="formField"
            :template-type="isPopups"
            @toggle="changeToggleParam"
          />
        </el-col>
      </el-row>
    </div>

  </section>
</template>
<script>
import { oneTableTemplateMixins } from '@/components/mixins/oneTableTemplateMixins'
import { valueObjectMixins } from '@/components/mixins/valueObjectMixins'
import { contsMixins } from '@/components/mixins/contsMixins'
import mixButton from '@/components/basicComponent/mixButton'
export default {
  components: {
    mixButton
  },
  // 组件混入对象：{data[listQuery] methods[queryTable]}
  mixins: [oneTableTemplateMixins, valueObjectMixins, contsMixins],
  props: {
    isshowSearchTableButton: { type: Boolean, default: true } // 是否显示查询按钮模块；
  },
  data() {
    return {
      // 是否用oneTable模板
      isOneTable: '1',
      // 是否点击一行时补充点击行多选标记
      isClickShowSelect: false
    }
  },
  mounted() {
    const that = this
    that.$nextTick(function() {
      that.isOverWidth()
    })
  }
}
</script>
